/*
 * @Author: xiaosihan 
 * @Date: 2023-08-10 11:24:00 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2023-12-07 00:21:37
 */

import fontManage from "@/myFabric/fontManage";
import Tooltip from "antd/lib/tooltip";
import clsx from "clsx";
import { autorun } from "mobx";
import { useEffect, useState } from "react";
import designTemplateEditorStore from "../../designTemplateEditorStore";
import designTemplateEditor from "../../designTemplateEditorer";
import styles from "./ToolFontFamily.module.less";

interface Iprops {
}

// 字体工具
export default function ToolFontFamily() {

    const [visible, setVisible] = useState(false);
    const [fontFamily, setFontFamily] = useState(designTemplateEditorStore.fontFamily);
    const [disable, setDisable] = useState(false);

    useEffect(() => autorun(() => {
        const { activeObjectId, lock, fontFamily } = designTemplateEditorStore;
        const activeObject = designTemplateEditor.fabricCanvas.getActiveObject();
        if (activeObjectId && activeObject && activeObject.type === "i-text") {
            setFontFamily(fontFamily);
            setDisable(lock);
            setVisible(true);
        } else {
            setVisible(false);
        }
    }), []);

    return (
        <Tooltip
            title={
                <div className={styles.fontFamily} >
                    {
                        fontManage.fontlist.map((fontC, i) => {
                            return (
                                <div
                                    key={i}
                                    onClick={() => {
                                        designTemplateEditor.setFontFontFamily(fontC.id);
                                        setFontFamily(fontC.id);
                                    }}
                                    className={clsx(styles.fontFamilyItem, (fontC.id === fontFamily) && styles.active)}
                                >
                                    <img
                                        alt=""
                                        className={styles.img}
                                        src={fontC.img}
                                    />
                                </div>
                            );
                        })
                    }
                </div>
            }
            trigger={['click']}
            color={"#ffffff"}
            placement="bottom"
        >
            <div
                className={clsx(styles.toolFontFamily, visible && styles.visible, disable && styles.disable)}
            >
                <img
                    alt=""
                    className={styles.fontImg}
                    src={fontManage.getFontImg(fontFamily)}
                />
            </div>
        </Tooltip>
    );

}